<template>
  <!-- <div class="container" :style="{ display: modelValue ? 'block' : 'none' }" @click="clickMask"> -->
  <div class="container" :style="{ display: show ? 'block' : 'none' }" @click="clickMask">
    <div
      class="content"
      @click.stop=""
      :style="{
        width: width + 'px',
        height: height + 'px',
        'z-index': 999,
        background: 'red'
      }"
    >
      <div class="title">
        <slot name="title"></slot>
      </div>
      <div class="center">
        <slot></slot>
      </div>
      <div class="footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="MyDialog">
// const {
//   width = 600,
//   height = 400,
//   modelValue = false
// } = defineProps<{ width?: number; height?: number; modelValue?: boolean }>()
const {
  width = 600,
  height = 400,
  show = false
} = defineProps<{ width?: number; height?: number; show?: boolean }>()

const emits = defineEmits<{
  // (e: 'update:modelValue', value: boolean): void
  (e: 'update:show', value: boolean): void
}>()
const clickMask = () => {
  // emits('update:modelValue', false)
  emits('update:show', false)
}
</script>

<style>
.container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(127, 127, 127, 0.5);
}

.content {
  margin: 50px auto;
  display: flex;
  flex-direction: column;
}

.content .title {
  height: 60px;
  width: 100%;
}

.content .center {
  flex: 1;
  width: 100%;
  text-align: center;
}

.content .footer {
  height: 100px;
  margin-top: 10px;
  width: 100%;
  text-align: right;
}
</style>
